<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor 上传图片</title>
</head>
<body>
    <p>wangEditor 上传图片到服务器</p>
    <div id="div3">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>
    <button id="btn1">获取html</button>
    <button id="btn2">获取text</button>
    <p>wangEditor 以base64保存图片文件</p>
    <div id="div4">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>

    <p>wangEditor 自定义上传图片</p>
    <div id="div5">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>

    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <!-- <script type="text/javascript" src="/jquery-1.11.1.min.js"></script> -->
    <script type="text/javascript">
        var E = window.wangEditor

        var editor2 = new E('#div3')
        editor2.customConfig.uploadImgServer = 'upload.php'
        editor2.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor2.customConfig.uploadImgMaxLength = 5;
        editor2.customConfig.uploadFileName = 'file';
        editor2.customConfig.uploadImgHeaders = {
            'Accept' : 'multipart/form-data'
        };
        editor2.customConfig.uploadImgHooks = {
            error: function (xhr, editor) {
                alert("2:"+xhr);
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            fail: function (xhr, editor, result) {
                alert("1:"+xhr);
            },
            success:function(xhr, editor, result){
                // console.log(result)
                // insertImg('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png')
            },
            customInsert: function (insertImg, result, editor) {
                //console.log(result)
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                insertImg(result.data)
            }
        };
        document.getElementById('btn1').addEventListener('click', function () {
            // 读取 html
            alert(editor2.txt.html())
        }, false)
        document.getElementById('btn2').addEventListener('click', function () {
            // 读取 text
            alert(editor2.txt.text())
        }, false)

        // editor2.customConfig.uploadImgHooks = {
        //     customInsert: function (insertImg, result, editor) {
        //         console.log(JSON.stringify(result))
        //         insertImg(result.data[0])
        //     },

        //     customInsert: function (insertImg, result, editor) {
        //         console.log(result)
        //     }
        // }
        // editor2.customConfig.uploadImgParams = {
        //     a: 123,
        //     b: 'vvv'
        // }
        // editor2.customConfig.uploadImgParamsWithUrl = true
        // console.log(result)
        editor2.create()

        var editor1 = new E('#div4')
        editor1.customConfig.uploadImgShowBase64 = true
        editor1.create()

        var editor = new E('#div5')
        editor.customConfig.uploadImgHeaders = {
            'Accept' : 'multipart/form-data'
        };
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.customUploadImg = function (files, insert) {
            // var file=files[0];
            console.log(files)
            // var formData=new FormData(files[0]);
            $.ajax({
                url:'upload.php',
                type:'POST',
                data:files,
                success:function(data){
                    console.log(data)
                    insert('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png')
                }
            });
        }
        editor.create()
    </script>
</body>
</html>